
import { Fragment, defineComponent, onMounted, onUnmounted } from "vue"
import classes from "./index.module.scss"
import { ElButton } from "element-plus"
import apiStore from "@/stores/apiStore"
import Table from "@/components/Table"
import { Emiter } from "@Tea/utils"
import { useTable } from "@/hooks/useTable"
import Telescoping from "@/components/Telescoping"

const PAGECODE = 'test'
const table1 = `${PAGECODE}-top`
const table2 = `${PAGECODE}-bottom`

function useTopTable() {
  const { resetCurPage,tableLoading, setRowData } = useTable(table1)
  const topgridAttr = {
    columnDefs: [
      { field: "make" },
      { field: "model" },
      { field: "price" }
    ]
  }
  const emiter = Emiter.getInstance()

  const getTopData = () => {
    tableLoading.value = true
    // 获取当前的页和每页数量，用于分页请求
    console.log(emiter.emit(table1, "getCurAndSize"));
    fetch("https://www.ag-grid.com/example-assets/row-data.json")
       .then((result) => result.json())
       .then((remoteRowData) => {
         setTimeout(() => {
           setRowData(remoteRowData)
           tableLoading.value = false
         }, 1500)
       });
  }

  onMounted(() => {
     getTopData()
  });

  emiter.on(table1, "onSearch", getTopData)

  return {topgridAttr, getTopData ,resetTopCurPage: resetCurPage, topLoading:tableLoading}
}

function useBottomTable() {
  const { resetCurPage, tableLoading, setRowData } = useTable(table2)
  const emiter = Emiter.getInstance()
  const getBottomData = () => {
    tableLoading.value = true
    console.log(emiter.emit(table1, "getCurAndSize"));
    fetch("https://www.ag-grid.com/example-assets/row-data.json")
       .then((result) => result.json())
       .then((remoteRowData) => {
         setTimeout(() => {
           setRowData(remoteRowData)
           tableLoading.value = false
         }, 2500)
       });
  }

  const bottomgridAttr = {
    columnDefs: [
      { field: "make" },
      { field: "model" },
      { field: "price" }
    ]
  }
  
  onMounted(() => {
    getBottomData()
  });

  emiter.on(table2, "onSearch", getBottomData)

  return {bottomgridAttr, getBottomData, resetBottomCurPage: resetCurPage, bottomLoading:tableLoading }
}

export default defineComponent({
  name: PAGECODE,
  setup(props, ctx) {
    const { getTopData,topgridAttr, resetTopCurPage,topLoading } = useTopTable()
    const { getBottomData,bottomgridAttr, resetBottomCurPage,bottomLoading } = useBottomTable()

    return () => {
      const render = (name: string, curClass?:string) => <div class={`m-window ${curClass || ''}`} style={{ height: "100%" }}>
      <div>
        <ElButton type="primary" onClick={name === table1 ? resetTopCurPage : resetBottomCurPage}>测试页面</ElButton>
        <ElButton class="m-left" type="primary" onClick={name === table1 ? getTopData : getBottomData}>请求</ElButton>
      </div>
      <Table
        v-loading={name === table1 ? topLoading.value : bottomLoading.value}
        gridAttr={name === table1 ? topgridAttr : bottomgridAttr}
        tableName={name}
      //initPagination={false} 
      ></Table>
    </div>
      return (
      <div class="m-padding m-window m-fullBox" style={{ overflow: 'hidden' }}>
        {
          <Telescoping
            type="column"
            v-slots={{
              firstNode: () => render(table1, "p-bottom"),
              secondNode: ()=> render(table2, "p-top")
            }}
          />
        }
      </div>
    )}
  }
})